Skip to main content

行内元素和块级元素

HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种，在使用过程中可以通过CSS的display属性相互转换。

行内元素​

行内元素对应的CSS样式设置为display: inline;。

特点​

  • 元素排在一行。
  • 封闭后不会自动换行。
  • 不能指定高度与宽度。
  • 可以使用line-height来指定高度。
  • 外边距对于水平方向有效，垂直方向无效。
  • 内边距对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响。

示例​

<span>行内元素1</span> <!-- 排列在一行 -->
<span>行内元素2</span> <!-- 排列在一行 -->
<span>行内元素3</span> <!-- 排列在一行 -->
<style type="text/css">
    span{
        width: 1000px; /* 指定宽度无效果 */
        height: 1000px; /* 指定高度无效果 */
        color: #333;
        background: #eee;

        padding: 100px 20px; /* padding对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响 */
        margin: 100px 20px; /* margin水平方向有效，垂直方向无效 */
    }
</style>

常见行内元素​

<a>、<span>、<b>、<big>、<i>、<small>、<tt>、<abbr>、<acronym>、<cite>、<code>、<dfn>、<em>、<kbd>、<strong>、<samp>、<var>、<bdo>、<br>、 <img>、<iframe>、<map>、<object>、<q>、<script>、<sub>、<sup>、<button>、<input>、<label>、<select>、<textarea>。

块级元素​

块级元素对应的CSS样式设置为display: block;。

特点​

  • 独占一行。
  • 封闭后自动换行。
  • 默认宽度为100%。
  • 可以指定宽度和高度。
  • 内外边距对于四个方向有效。

示例​

<div>块级元素1</div> <!-- 独占一行 -->
<div>块级元素2</div> <!-- 自动换行 -->
<style type="text/css">
    div{
        width: 100px; /* 不指定则默认宽度100% */
        height: 100px; /* 可以指定高度 */
        color: #333;
        background: #eee;

        padding: 10px 20px; /* padding的设置在四个方向都有效 */
        margin: 10px 20px; /* margin的设置在四个方向都有效 */
    }
</style>

常见块级元素​

<div>、<address>、<article>、<aside>、<audio>、<blockquote>、<canvas>、<dd>、<dl>、<fieldset>、<figcaption>、<figure>、<footer>、<form>、<h1>~<h6>、<header>、<hgroup>、<hr>、<noscript>、<ol>、<output>、<p>、<pre>、<section>、<table>、<tfoot>、<ul>、<video>。

行内块级元素​

行内块级元素对应的CSS样式设置为display: inline-block;。

特点​

  • 可以指定宽度和高度。
  • 内外边距对于四个方向有效。
  • 元素排在一行，但是会有空白缝隙。

示例​

<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<style type="text/css">
    input{
        width: 100px; /* 可以指定宽度 */
        height: 100px; /* 可以指定高度 */

        padding: 10px 20px; /* padding的设置在四个方向都有效 */
        margin: 100px 20px; /* margin的设置在四个方向都有效 */
    }
</style>

常见行内块级元素​

<input>、<img>、<button>、<iframe>、<textarea>、<select>。

代码示例​

<!DOCTYPE html>
<html>
<head>
    <title>行内元素与块级元素</title>
    <style type="text/css">
        div{
            width: 100px; /* 不指定则默认宽度100% */
            height: 100px; /* 可以指定高度 */
            color: #333;
            background: #eee;

            padding: 10px 20px; /* padding的设置在四个方向都有效 */
            margin: 10px 20px; /* margin的设置在四个方向都有效 */
        }

        span{
            width: 1000px; /* 无法指定宽度 */
            height: 1000px; /* 无法指定高度 */
            color: #333;
            background: #eee;

            padding: 100px 20px; /* padding对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响 */
            margin: 100px 20px; /* margin水平方向有效，垂直方向无效 */
        }

        input{
            width: 100px; /* 可以指定宽度 */
            height: 100px; /* 可以指定高度 */

            padding: 10px 20px; /* padding的设置在四个方向都有效 */
            margin: 100px 20px; /* margin的设置在四个方向都有效 */
        }


    </style>
</head>
<body>

    <section>
        <div>块级元素1</div> <!-- 独占一行 -->
        <div>块级元素2</div> <!-- 自动换行 -->
    </section>


    <section >
        <span>行内元素1</span> <!-- 排列在一行 -->
        <span>行内元素2</span> <!-- 排列在一行 -->
        <span>行内元素3</span> <!-- 排列在一行 -->
    </section>

    <section >
        <input /><!-- 排列在一行 -->
        <input /><!-- 排列在一行 -->
        <input /><!-- 排列在一行 -->
    </section>


</body>
</html>

每日一题​

https://github.com/WindrunnerMax/EveryDay

参考​

https://developer.mozilla.org/zh-CN/docs/Web/HTML
https://blog.csdn.net/zhanglir333/article/details/79178370
https://www.jeffjade.com/2015/06/24/2015-06-24-css-block-inline/